<template>
  <div>
    <!--表头-->
    <div class="title" style="width: 80%;margin-left: 10%;">
      <h3>我的订单</h3>
      <el-table
        ref="multipleTable"
        @row-click="goOrder"
        :span-method="objectSpanMethod"
        :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%;">
        <el-table-column label="订单号" prop="name" align="center">123552</el-table-column>
        <el-table-column label="订单金额" prop="name" align="center">
          <template slot-scope="scope">
            <span>&yen;</span>{{scope.row.prize}}
          </template>
        </el-table-column>
        <el-table-column label="订单状态" prop="name" align="center">已完成</el-table-column>
        <el-table-column label="下单时间" prop="name" align="center">{{timestampToTime}}</el-table-column>
        <el-table-column label="支付时间" prop="name" align="center">{{timestampToTime}}</el-table-column>
        <!--        上下架状态-->
        <el-table-column label="状态" prop="prize" width="110px" align="center">
          <template slot-scope="scope">
            <el-tag :type="orderStatus(scope.row.status)">{{scope.row.status==1?"未支付":"已支付"}}</el-tag>
          </template>
        </el-table-column>
        <!--        商品图片-->
        <el-table-column label="商品" prop="img" width="110px" align="center">
          <template slot-scope="scope">
            <el-image style="width: 100px; height: 100px;" :src="scope.row.img"/>
          </template>
        </el-table-column>
        <!--        商品名字-->
        <el-table-column label="商品名" prop="name" align="center"></el-table-column>
        <!--        商品单价-->
        <el-table-column label="单价" prop="prize" width="110px" align="center">
          <template slot-scope="scope">
            <span>&yen;</span>{{scope.row.prize}}
          </template>
        </el-table-column>
        <!--        商品数量-->
        <el-table-column label="总金额" prop="prize" width="110px" align="center">
          <template slot-scope="scope">
            <span>&yen;</span>{{scope.row.prize}}
          </template>
        </el-table-column>

      </el-table>
    </div>
    <div style="width: 80%;margin-left: 10%;">

    </div>
  </div>
</template>

<script>
  export default {
    name: "myOrders",
    data() {
      return {
        tableData: [{
          name: '去内脏八爪鱼',
          prize: 598.00,
          status: "1",
          img: "https://img13.360buyimg.com/n7/jfs/t1/156044/37/8082/528791/601369c2E3e5ab1f1/cdc30c8f82d78b1e.jpg",
          nums: 1
        }, {
          name: '大虾',
          prize: 598.00,
          status: "1",
          img: "https://img12.360buyimg.com/n7/jfs/t1/168477/39/21159/927428/6087c649E0ac7ebce/b87f6b39346eb746.png",
          nums: 1
        }, {
          name: '麻辣即食海鲜罐头',
          prize: 63.90,
          status: "2",
          img: "https://img11.360buyimg.com/n7/jfs/t1/196718/36/6054/554214/60b83074E41e15cb5/768686f765a944b6.jpg",
          nums: 2
        }],
        search: '',
      }
    },
    created() {
    },
    methods: {
      orderStatus(status) {
        if (status == "1")
          return "danger";
        else if (status == "2")
          return "";
      }
      ,
      goOrder(row, column, event) {
        this.$router.push({
          path: '/submitOrder',
          query: {
            goods: row
          }
        });
      }
      ,
      objectSpanMethod({row, column, rowIndex, columnIndex}) {

      }
      ,
    },
    computed:{

      timestampToTime() {
        var date = new Date();
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() + ' ';
        var hh = date.getHours() < 10 ? '0' + date.getHours() : date.getHours() + ':';
        var mm = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes() + ':';
        var ss = date.getSeconds() < 10 ? '0' + date.getDate() : date.getSeconds();
        return Y + M + D + hh + mm + ss;
      },
    }

  }
</script>

<style scoped>
  .title {
    margin-top: 50px;
  }

  .title h3 {
    /*float: left;*/
    font-size: 23px;
    color: #c91623;
  }
</style>
